<template>
    <div class="zichan">
        <zongHead iszong="1"></zongHead>
        <div class="zicontent">
            <div class="anview">
                <span class="antit">安全中心</span>
                <div class="anpei">
                    <span class="anpeitit">安全设置项</span>
                    <span class="anpeimiao">修改您的安全设置项</span>
                </div>
                <div class="milist">
                    <img src="@/assets/img/addition/suo.png" alt="" class="suo" />
                    <div class="mnav">
                        <span class="miname">登录密码</span>
                        <span class="mimiao">通过设置登录密码，您将可以使用账号和登录密码直接登录</span>
                    </div>
                    <span class="genmi ml" @click="xiumi(1)">更换密码</span>
                </div>
                <div class="milist">
                    <img src="@/assets/img/addition/xiao.png" alt="" class="suotwo" />
                    <div class="mnav">
                        <span class="miname">邮箱验证</span>
                        <span class="mimiao">通过邮箱获取一次性验证码，用于登录和其他需要安全验证的功能</span>
                    </div>
                    <span class="you ml">okl***@outlook.com</span>
                    <span class="genmi" @click="xiumi(2)">更改邮箱</span>
                </div>
            </div>

        </div>
</div>
</template>
  
<script>
import { ref } from 'vue';
import zongHead from '@/views/property/components/zongHead.vue';
// import { el } from 'element-plus/es/locale';
export default {
    name: "propertyHome",
    components: { zongHead },
    data() {
        return {
            modal1: false,
            ishead: 0,
            iseye: false,
            istou: 2,
            isrenzheng: false,//是否认证样式
        };
    },
    mounted() {
        // autofit.init({
        //   dh: 950,
        //   dw: 1200,
        //   el: "#app",
        //   resize: true
        // });
        // let devicewidth = document.documentElement.clientWidth//获取当前分辨率下的可是区域宽度
        //   let scale = devicewidth / 1920 // 分母——设计稿的尺寸
        //   document.body.style.zoom = scale//放大缩小相应倍数
        // },
    },
    setup() {
    },
    methods: {
        toggleMode(e) {
            // console.log(e)
            this.ishead = e

        },
        istouClick(e) {
            this.istou = e
        },
        xiumi(e){
            if(e == 1){
                //修改登录密码
                this.$router.push({ path: '/LoginPSD'})
            }else if(e == 2){
                //修改邮箱
                this.$router.push({ path: '/EmailEdit'})
            }
        }
    }
};
//   const ishead = ref('0');
//   const toggleMode = (e) => {
//     ishead.value = e;
//   };
</script>
  
<style lang="scss" scoped>

.zicontent {
    padding: 28px 20%;
    display: flex;
    flex-direction: column;
    .anview{
        .antit{
            font-size: 24px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #121212;
            margin-bottom: 40px;
            display: block;
        }
        .anpei{
            display: flex;
            flex-direction: column;
            margin-bottom: 30px;
            .anpeitit{
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #121212;
                display: block;
                
            }
            .anpeimiao{
                display: block;
                margin-top: 5px;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #666666;
            }
        }
        .milist{
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 11px 0;
            border-bottom: 1px solid #EEEEEE;
            cursor: pointer;
            .suo{
                width: 14px;
                height: 16px;
                margin-right: 10px;

            }
            .suotwo{
                width: 14px;
                height: 11px;
                margin-right: 10px;
            }
            .mnav{
                width: 60%;
                display: flex;
                flex-direction: column;
                .miname{
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #000000;
                }
                .mimiao{
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #666666;
                    display: block;
                    margin-top: 2px;
                }
            }
            .genmi{
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #3976E4;
            }
            .ml{
                margin-left: auto;
            }
            .you{
                margin-right: 5px;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #666666;
            }
        }
    }
}

.xiaclass {
    position: relative;
    top: 4px !important;
}</style>